<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员系统</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/admin/css/all.css}">
    <!--外观-->
    <link rel="stylesheet" th:href="@{/admin/css/adminlte.min.css}">
    <!-- 左侧滚动条 -->
    <link rel="stylesheet" th:href="@{/admin/css/OverlayScrollbars.min.css}">
    <style>
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <!--括号内的值为${path}，用于高亮框-->
    <div th:replace="pc/admin/sidebar::sidebar-fragment('index')"></div>
    <div class="content-wrapper">
        <section class="content-header">
        </section>
        <div class="content">
            <div class="container-fluid" style="display:flex;">
                <div class="col-6">
                    <h5 class="mb-2">今日新增</h5>
                    <div class="row" style="flex-wrap: wrap">
                        <div class="col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3 th:text="${foundPost}"></h3>
                                    <p>招领发布</p>
                                </div>
                                <div class="icon">
                                    <i class="nav-icon fa fa-eye-slash"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3 th:text="${lostPost}"></h3>
                                    <p>丢失发布</p>
                                </div>
                                <div class="icon">
                                    <i class="nav-icon fa fa-box-open"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <!-- small card -->
                            <div class="small-box bg-warning">
                                <div class="inner" style="color: #FFFFFF">
                                    <h3 th:text="${user}"></h3>
                                    <p>用户数量</p>
                                </div>
                                <div class="icon">
                                    <i class="nav-icon fa fa-user-plus"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-6">
                            <!-- small card -->
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3 th:text="${contactItem}"></h3>
                                    <p>用户交流</p>
                                </div>
                                <div class="icon">
                                    <i class="nav-icon fa fa-comment"></i>
                                </div>
                            </div>
                        </div>
                        <!-- ./col -->
                    </div>
                </div>
                <div class="col-6">
                    <h5 class="mb-2">JVM信息</h5>
                    <div class="card">
                        <div style="margin-left: 10px; margin-right: 10px">
                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item" style="border-top: 0">
                                    <b>CPU核心数量</b> <span class="float-right" th:text="${cpu}"></span>
                                </li>
                                <li class="list-group-item">
                                    <b>总内存</b> <span class="float-right" th:text="${totalMemory}+'G'"></span>
                                </li>
                                <li class="list-group-item">
                                    <b>可用内存</b> <span class="float-right" th:text="${freeMemory}+'G'"></span>
                                </li>
                                <li class="list-group-item" style="border-bottom: 0">
                                    <b>内存使用率</b> <span id="rate" class="float-right"></span>
                                    <div class="progress" style="margin-top: 5px;">
                                        <div id="bar" class="progress-bar"
                                             style="width: 10%; background-color: #a679e8">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- jQuery -->
<script th:src="@{/admin/js/jquery.min.js}"></script>
<!-- overlayScrollbars -->
<script th:src="@{/admin/js/jquery.overlayScrollbars.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/admin/js/adminlte.js}"></script>
<script th:inline="javascript">
    var totalMemory = [[${totalMemory}]];
    var freeMemory = [[${freeMemory}]];
    var rate = Math.round((totalMemory - freeMemory) / totalMemory * 100);
    $('#rate').text(rate + '%');
    $('#bar').css('width', rate + '%')
</script>
</body>
</html>